<template>
	<view class="order">
		<!-- 状态栏 -->
		<view class="status_bar"></view>
		<!-- 选项卡一 -->
		<view class="tabs-swiper-onw">
			<u-tabs-swiper ref="tabs" :list="list1" :current="current" :is-scroll="true" active-color="#000104"
				font-size="34rpx" :show-bar="false" gutter="80" bg-color="#f7f7f7" @change="dochange">
			</u-tabs-swiper>
		</view>

		<!-- 滑动区一 -->
		<swiper :current="swiperCurrent" :style="{height: (wh - 100) +'px'}" class="swipers" @change="swiperChangeone">
			<!-- 滑动1.1 -->
			<swiper-item>
				<!-- 选项卡二 -->
				<view class="tabs-swiper-two">
					<u-tabs-swiper ref="tabs" :list="list" :current="current2" :is-scroll="true" active-color="#01C3A8"
						bg-color="#f7f7f7" inactive-color="#9B9B9D" font-size="24rpx" @change="dochange2">
					</u-tabs-swiper>
				</view>
				<!-- 滑动区二 -->
				<swiper :current="swiperCurrent2" :style="{height: (wh-140) + 'px'}" class="swipers"
					@change="swiperChangetwo">
					<!-- 全部 -->
					<swiper-item>
						<OrderList v-if="orderLists[0]" :orderList='orderLists' :odtol='toaObj' @changepage="dopage">
						</OrderList>
						<Blankpage v-else></Blankpage>
					</swiper-item>
					<!-- 待付款 -->
					<swiper-item>
						<OrderList v-if="Listtwo[0]" :orderList='Listtwo' :odtol='toaObj' @changepage="dopage">
						</OrderList>
						<!-- 空白页 -->
						<Blankpage v-else></Blankpage>
					</swiper-item>
					<!-- 待预约 -->
					<swiper-item>
						<OrderList v-if="Listtwo[0]" :orderList='Listtwo' :odtol='toaObj' @changepage="dopage">
						</OrderList>
						<!-- 空白页 -->
						<Blankpage v-else></Blankpage>
					</swiper-item>
					<!-- 服务中 -->
					<swiper-item>
						<OrderList v-if="Listtwo[0]" :orderList='Listtwo' :odtol='toaObj' @changepage="dopage">
						</OrderList>
						<!-- 空白页 -->
						<Blankpage v-else></Blankpage>
					</swiper-item>
					<!-- 已完成 -->
					<swiper-item>
						<OrderList v-if="Listtwo[0]" :orderList='Listtwo' :odtol='toaObj' @changepage="dopage">
						</OrderList>
						<!-- 空白页 -->
						<Blankpage v-else></Blankpage>
					</swiper-item>
					<!-- 其他 -->
					<swiper-item>
						<OrderList v-if="Listtwo[0]" :orderList='Listtwo' :odtol='toaObj' @changepage="dopage">
						</OrderList>
						<!-- 空白页 -->
						<Blankpage v-else></Blankpage>
					</swiper-item>
				</swiper>
			</swiper-item>

			<!-- 滑动1.2 -->
			<swiper-item>
				<scroll-view v-if="RefundList[0]" scroll-y :style="{height: (wh-100) +'px'}" refresher-enabled="true"
					:refresher-triggered="triggeredone" @refresherrefresh="doRefresherone" lower-threshold="100"
					@scrolltolower="doScrollone">
					<view class="swiper-item" v-for="(item,index) in RefundList" :key="index">
						<view class="title">
							<view class="left">{{item.status}}</view>
							<view class="right" @click="ToRefundDe(item)">查看详情
								<u-icon name="arrow-right" />
							</view>
						</view>
						<view class="tip" v-if="item.status == '待审核'">据系统默认退款还剩：<text class="text">{{countdown}}</text>
						</view>

						<view class="tip" v-else>订单{{item.status}}</view>
						<view class="info">
							<view class="info-left">服务内容：</view>
							<view class="info-right">{{item.product_detail}}</view>
						</view>
						<view class="info">
							<view class="info-left">退款类型：</view>
							<view class="info-right">{{item.type}}</view>
						</view>
						<view class="info">
							<view class="info-left">申请金额：</view>
							<view class="info-right">{{item.refund_money}}元</view>
						</view>
						<view class="info">
							<view class="info-left">申请时间：</view>
							<view class="info-right">{{item.createtime2}}</view>
						</view>
						<view class="last">
							<view class="rest"></view>
							<view class="btn" @click="getCancellation(item.id)">取消退款</view>
						</view>
					</view>
				</scroll-view>

				<!-- 空白页 -->
				<Blankpage v-else></Blankpage>
			</swiper-item>

			<!-- 滑动1.3 -->
			<swiper-item>
				<scroll-view v-if="PlaintList[0]" scroll-y :style="{height: (wh - 100) +'px'}" refresher-enabled="true"
					:refresher-triggered="triggeredtwo" @refresherrefresh="doRefreshertwo" lower-threshold="100"
					@scrolltolower="doScrolltwo">
					<view class="swiper-item" v-for="(item,index) in PlaintList" :key="index">
						<view class="title">
							<view class="left">{{item.status}}</view>
							<view class="right" @click="ToComplaintDe(item.id)">查看详情
								<u-icon name="arrow-right" />
							</view>
						</view>
						<view class="tip">投诉{{item.status}}</view>
						<view class="info">
							<view class="info-left">服务内容：</view>
							<view class="info-right">{{item.product_detail}}</view>
						</view>
						<view class="info">
							<view class="info-left">投诉内容：</view>
							<view class="info-right u-line-1">{{item.complaint_desc}}</view>
						</view>
						<view class="info">
							<view class="info-left">回复内容：</view>
							<view class="info-right" v-if="item.reply">{{item.reply}}</view>
							<view class="info-right" v-else>暂未回复</view>
						</view>
						<view class="info">
							<view class="info-left">投诉时间：</view>
							<view class="info-right">{{item.createtime2}}</view>
						</view>
						<view class="last">
							<view class="rest"></view>
							<view class="btn" @click="getCanplaint(item.id)">取消投诉</view>
						</view>
					</view>
				</scroll-view>
				<!-- 空白页 -->
				<Blankpage v-else></Blankpage>
			</swiper-item>

		</swiper>

	</view>
</template>

<script>
	import {
		ResOrderList,
		ResRefundList,
		ResPlaintList,
		ResCancellation,
		ResCanplaint
	} from '@/untils/api.js'
	import { OrderList } from '@/components/OrderList/OrderList'
	import { toDate } from '@/untils/gettime.js'
	import { Blankpage } from '@/components/Blankpage/Blankpage.vue'
	export default {
		components: {
			OrderList,
			Blankpage
		},
		data() {
			return {
				ListObj: {
					page: 1,
					limit: 10
				},
				toaObj: {
					total: '',
					isLoadAll: false, // 节流阀
				},
				// 退款
				refuObj: {
					page: 1,
					limit: 10
				},
				refuLoad: false,
				totaltwo: '',
				// 投诉
				plaObj: {
					page: 1,
					limit: 10
				},
				plaLoad: false,
				totaltherr: '',
				clickLoad: false,
				orderLists: [], // 订单列表
				Listtwo: [],
				triggeredone: false,
				triggeredtwo: false,
				wh: '',
				RefundList: [], // 退款列表
				PlaintList: [], // 投诉列表
				current: 0,
				swiperCurrent: 0,
				current2: 0,
				swiperCurrent2: 0,
				list1: [{
					name: '全部订单',
				}, {
					name: '退款记录',
				}, {
					name: '投诉记录',
				}],
				list: [{
						name: '全部'
					}, {
						name: '待付款'
					}, {
						name: '待预约',
					},
					{
						name: '服务中',
					},
					{
						name: '已完成',
					},
					{
						name: '其他',
					}
				],
				countdown: ''

			}
		},
		onShow() {
			// 获取订单列表
			this.orderLists = []
			this.getOrderList()
		},
		onLoad() {
			// 获取页面可操作高度
			let getWindowInfo = uni.getWindowInfo()
			this.wh = getWindowInfo.windowHeight

		},
		methods: {
			dopage(e1, e2) {
				console.log(e1, e2);
				this.ListObj.page = e1
				this.orderLists = e2
			},
			ToRefundDe(item) {
				uni.navigateTo({
					url: `/pages/Order/RefundDe?id=${item.id}&redtime=${item.refund_time}`
				})
			},
			ToComplaintDe(id) {
				uni.navigateTo({
					url: `/pages/Order/ComplaintDe?id=${id}`
				})
			},
			Toxiang(item) {
				console.log(item);
			},
			// 取消投诉
			async getCanplaint(id) {
				let idOne = { id: id }
				const { data: res } = await ResCanplaint(idOne)
				if (res.code != 1) return uni.$showMsg(res.msg)
				console.log(res, '取消投诉');
				// 重新获取投诉记录
				this.getPlaintList()
			},
			// 取消退款
			async getCancellation(id) {
				let idObj = { id: id }
				const { data: res } = await ResCancellation(idObj)
				if (res.code != 1) return uni.$showMsg(res.msg)
				console.log(res, '取消退款');
				this.getRefundList()
			},
			// 下拉刷新
			doRefresherone() {
				this.refuObj.page = 1
				this.RefundList = []
				this.triggeredone = true
				// 重新获取退款记录
				this.getRefundList()
				setTimeout(() => {
					this.triggeredone = false;
				}, 1000)
			},
			doRefreshertwo() {
				this.plaObj.page = 1
				this.PlaintList = []
				this.triggeredtwo = true
				// 重新获取投诉记录
				this.getPlaintList()
				setTimeout(() => {
					this.triggeredtwo = false;
				}, 1000)
			},
			// 上拉加载
			doScrollone() {
				// 页数乘以每页条数
				if (this.refuObj.page * 10 >= this.totaltwo) return uni.$showMsg('暂无更多数据!')
				if (this.refuLoad) return
				this.refuObj.page++
				this.getRefundList()
			},
			doScrolltwo() {
				if (this.plaObj.page * 10 >= this.totaltherr) return uni.$showMsg('暂无更多数据!')
				if (this.plaLoad) return
				this.plaObj.page++
				this.getPlaintList()
			},
			// 获取订单列表
			async getOrderList() {
				this.isLoadAll = true // 开启
				const { data: res } = await ResOrderList(this.ListObj)
				if (res.code != 1) return uni.$showMsg(res.msg)
				this.orderLists = [...this.orderLists, ...res.data.data]
				this.toaObj.total = res.data.total
				this.toaObj.isLoadAll = false

				this.orderLists.forEach(item => {
					if (item.status == 1) {
						item.status = '待付款'
					} else if (item.status == 2) {
						item.status = '待预约'
					} else if (item.status == 3) {
						item.status = '服务中'
					} else if (item.status == 4) {
						item.status = '已完成'
					} else if (item.status == 5) {
						item.status = '待退款'
					} else if (item.status == 6) {
						item.status = '已退款'
					} else if (item.status == 7) {
						item.status = '已投诉'
					} else if (item.status == 8) {
						item.status = '已取消'
					}
				})

				this.orderLists.forEach(item => {
					item.receiving_time2 = toDate(item.receiving_time, 1)

					if (item.receiving_time2 === '1970-01-01 08:00:00') {
						item.receiving_time2 = '暂未接单'
					}
				})

				console.log(this.orderLists, '订单列表');
			},
			// 一级选项卡点击事件
			dochange(index) {
				this.current = index
				this.swiperCurrent = index
				this.getList(index)

			},
			// 一级选项卡滑动事件
			swiperChangeone(e) {
				if (this.refuLoad) return
				if (this.plaLoad) return
				this.current = e.detail.current
				this.swiperCurrent = e.detail.current
				this.getList(e.detail.current)
			},
			// 动态获取一级选项卡数据
			getList(index) {
				// 退款记录
				if (index == 1) {
					this.RefundList = []
					this.getRefundList()
					// 投诉记录
				} else if (index == 2) {
					this.PlaintList = []
					this.getPlaintList()
				}
			},
			// 二级选项卡点击事件
			dochange2(index) {
				this.Listtwofilter(index)
				this.current2 = index
				this.swiperCurrent2 = index
			},

			// 二级选项卡滑动事件
			swiperChangetwo(e) {
				this.Listtwofilter(e.detail.current)
				this.current2 = e.detail.current
				this.swiperCurrent2 = e.detail.current
			},
			// 获取投诉记录
			async getPlaintList() {
				this.plaLoad = true
				const { data: res } = await ResPlaintList(this.plaObj)
				if (res.code != 1) return uni.$showMsg(res.msg)
				this.PlaintList = [...this.PlaintList, ...res.data.rows]
				this.totaltherr = res.data.total
				this.plaLoad = false
				this.PlaintList.filter(item => {
					if (item.status == 1) {
						item.status = '待审核'
					} else if (item.status == 2) {
						item.status = '审核拒绝'
					} else if (item.status == 3) {
						item.status = '已受理'
					}
				})
				this.PlaintList.forEach(item => {
					item.createtime2 = toDate(item.createtime, 1)
				})
				console.log(res, '投诉记录');
			},
			// 获取退款记录
			async getRefundList() {
				this.refuLoad = true
				const { data: res } = await ResRefundList(this.refuObj)
				if (res.code != 1) return uni.$showMsg(res.msg)
				this.RefundList = [...this.RefundList, ...res.data.rows]
				this.totaltwo = res.data.total
				this.refuLoad = false
				this.RefundList.forEach(item => {
					if (item.type == 1) {
						item.type = '全额退款'
					} else if (item.type == 2) {
						item.type = '部分退款'
					}
					if (item.status == 1) {
						item.status = '待审核'
					} else if (item.status == 2) {
						item.status = '审核拒绝'
					} else if (item.status == 3) {
						item.status = '待到账'
					} else if (item.status == 4) {
						item.status = '已到账'
					}
				})

				this.RefundList.forEach(item => {
					item.createtime2 = toDate(item.createtime, 1)
					// 倒计时
					let endtime = new Date(item.refund_time).getTime() // 结束时间
					let timer = setInterval(() => {
						let nowtime = new Date().getTime() //获取现在时间
						let time = Math.ceil((endtime - nowtime) / 1000) // 时间差

						let d = parseInt(time / (60 * 60 * 24)); // 天
						let h = parseInt(time / 60 / 60 % 24) // 时
						let m = parseInt(time / 60 % 60) // 分
						let s = parseInt(time % 60) // 秒
						this.countdown = d + '天' + h + '时' + m + '分' + s + '秒'
						if (time <= 0) {
							clearInterval(timer)
							return this.countdown = ''
						}
					}, 1000)
				})
				console.log(res, '退款记录');

			},


			// 过滤数组
			Listtwofilter(index) {
				// 进行过滤筛选
				this.Listtwo = this.orderLists.filter(item => {
					if (index == 1) {
						return item.status == '待付款'
					} else if (index == 2) {
						return item.status == '待预约'
					} else if (index == 3) {
						return item.status == '服务中'
					} else if (index == 4) {
						return item.status == '已完成'
					} else if (index == 5) {
						return item.status == '已取消'
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.order {
		background-color: #F7F7F7;

		.tabs-swiper-onw {
			padding: 0 20rpx;

			// 一级选项卡标题盒子
			/deep/.u-tabs-scroll-box {
				display: flex;
				justify-content: space-between;
			}
		}

		.swipers {
			.tabs-swiper-two {
				padding: 0 20rpx;

				/deep/.u-tabs-scroll-box {
					display: flex;
					justify-content: space-between;
				}
			}

			.swiper-item {
				background-color: #fff;
				padding: 30rpx;
				margin-bottom: 20rpx;

				// 退款记录
				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.title .left {
					font-size: 34rpx;
					font-weight: 600;
					color: #000104;
				}

				.title .right {
					font-size: 26rpx;
					font-weight: 400;
					color: #222222;
				}

				.tip {
					font-size: 26rpx;
					font-weight: 400;
					color: #969696;
					margin-top: 14rpx;
					margin-bottom: 34rpx;
				}

				.tip .text {
					color: #D5924B;
				}

				.info {
					display: flex;
					justify-content: left;
				}

				.info .info-left {
					margin-right: 70rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #9B9B9B;
				}

				.info .info-right {
					font-size: 26rpx;
					font-weight: 400;
					color: #222222;
					margin-bottom: 10rpx;
				}

				.last {
					width: 100%;
					display: flex;
				}

				.last .rest {
					flex: 1;
				}

				.last .btn {
					width: 210rpx;
					height: 73rpx;
					line-height: 73rpx;
					text-align: center;
					border-radius: 37rpx;
					background: #01C3A8;
					font-size: 30rpx;
					font-weight: 400;
					color: #EDFFFF;
				}

			}
		}
	}
</style>
